<template>
  <div class="map-container" ref="chartsDom"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
//@ts-ignore,引入china_map地图json数据
import china_map_json from "./china_map.json";


//获取原生dom
let chartsDom = ref();

//@ts-ignore注册中国地图
echarts.registerMap("china",china_map_json);

//地图配置项
const mapOptions = {
    //地图组件
    geo:{
      map:"china",  //中国地图
      roam:true,  //是否支持鼠标缩放
      //地图位置调试
      left:0,
      top:0,
      right:0,
      bottom:0,
      //地图文字设置
      label:{
        show:true,
        color:"white"
      },
      //每一个多边形的样式
      itemStyle:{
        color:'skyblue',
        emphasis: {  // 设置高亮样式
          areaColor: 'red'
        }
      },
      regions: [  // 单独设置某个省份的样式
            {
              name: '广东省',
              itemStyle: {
                areaColor: 'gray'
              }
            },
            {
              name:"江苏省",
              itemStyle:{
                areaColor:"blue",
              }
            },
            {
              name:"台湾省",
              itemStyle:{
                areaColor:"green"
              }
            }
        ]
    }
}

//绘制中国地图
const drawMap = () => {
  let mycharts = echarts.init(chartsDom.value);
  mycharts.setOption(mapOptions)
}

//生命周期
onMounted(()=>{
  //初始化地图
  drawMap();
})

</script>
<script lang="ts">
export default {
    name:"Map"
}
</script>
<style lang="css">
.map-container{
  width: 1100px;
  height: 900px;
}
</style>